<template>
    <div class="layout">
        <Layout class="layout" v-on:click.native="start()">
            <Header style="background-color: #f8f8f9; height: 130px;">
                <div style="display:flex;justify-content:flex-start;align-items:center;flex-direction:row;height: 100%;">
                    <img src="../images/logo.png" height="80" style="margin-right: 40px;"/>
                    <div style="display:flex;flex-direction:column;">
                        <h2>当前系统时间：{{nowTime}}</h2>

                        <!-- <h3>{{weather.city}}目前温度：{{weather.wendu}} 摄氏度</h3>
                        <h3>易感提示：{{weather.ganmao}}</h3>
                        <h3>明日({{weather.forecast[1].date}})天气情况：{{weather.forecast[1].high}} - {{weather.forecast[1].low}} {{weather.forecast[1].type}}</h3> -->
                        </div>
                </div>
            </Header>
            <div style="display: flex; justify-content: center;align-items: center;height: 100%">
                <img ref="ADImg" height="100%"/>
            </div>
        </Layout>
    </div>
</template>
<script>
    import * as axios from "axios";

    export default {
        data() {
            return {
                carousel: 0,
                screenWidth: document.documentElement.clientWidth,
                screenHeight: document.documentElement.clientHeight,
                imgList:[],
                nowImg:0,
                nowTime:null,
                weather:{
                    city:'长沙天气加载中……',
                    wendu:'0',
                    ganmao:'',
                    forecast:[{},{
                        date:'',
                        high:0,
                        low:0,
                        type:''
                    }]
                },
            }
        },
        mounted() {
            this.update();
            window.setInterval(()=>{
                var d = new Date();
                var year = d.getFullYear();
                var month = d.getMonth() + 1;
                var date = d.getDate();
                var days = new Array("日","一","二","三","四","五","六");
                var day = d.getDay();
                var hour = (d.getHours() < 10) ? ("0" + d.getHours()) : d.getHours();
                var min = (d.getMinutes() < 10) ? ("0" + d.getMinutes()) : d.getMinutes();
                var sec = (d.getSeconds() < 10) ? ("0" + d.getSeconds()) : d.getSeconds();
                this.nowTime = year + "年" + month + "月" + date + "日 星期" + days[day] + " " + hour + ":" + min + ":" + sec;
            },1000);
        },
        methods: {
            start() {
                clearInterval(this.adImgDurationClock);
                this.$router.push("/");
            },
            update() {

                axios({
                    method: 'get',
                    url: 'http://localhost:8999/getControlScreenADImgList',
                }).then((response) => {
                    let responseData = response.data;
                    this.imgList = responseData;
                    this.imgPlay();
                });

                axios
                    .get("http://wthrcdn.etouch.cn/weather_mini?city=长沙")
                    .then((response) => {
                        this.weather=response.data.data;
                    })
            },
            imgPlay() {
                clearInterval(this.adImgDurationClock);
                if (this.nowImg < this.imgList.length) {
                    axios({
                        method: 'get',
                        url: 'http://localhost:8999/getADImgFile?picName=' + this.imgList[this.nowImg].fileName,
                        responseType: 'arraybuffer',
                    }).then(response => {
                        //并对获得数据进行处理以显示
                        return 'data:image/png;base64,' + btoa(new Uint8Array(response.data).reduce((data, byte) => data + String.fromCharCode(byte), ''));
                    }).then(data => {
                        //将图像数据加载到图片占位
                        this.$refs.ADImg.src = data;
                    });
                    let remainTime=this.imgList[this.nowImg].playerDuration;
                    this.adImgDurationClock = window.setInterval(() => {
                        remainTime--;
                        if (remainTime < 0) {
                            this.nowImg++;
                            this.imgPlay();
                        }
                    }, 1000)
                } else {
                    this.nowImg = 0;
                    this.update();
                }
            }
        }
    }
</script>

<style scoped>
    .layout {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        border: 1px solid #d7dde4;
        border-radius: 4px;
        overflow: hidden;
        width: 100%;
        height: 100%;
    }
</style>